<template>
	<view class="fmail_form">
		<u-form :model="form" ref="fmailForm" label-width="180">
			<u-form-item label="寄件人" prop="from">
				<u-input v-model="form.from" placeholder="请输入寄件人姓名" />
			</u-form-item>
			<u-form-item label="收件邮箱" prop="email">
				<u-input v-model="form.email" placeholder="请输入收件人邮箱" />
			</u-form-item>
			<u-form-item label="寄件时间" prop="sendTime">
				<view @click="handleShowTimePicker">{{defaultTime || "请选择收件邮箱"}}</view>
				<u-picker mode="time" :default-time="defaultTime" :params="timePickerParams" v-model="isShowTimePicker"
					@confirm="timePickerConfirm"></u-picker>
			</u-form-item>
			<u-form-item label="邮件内容" label-position="top" prop="emailContent">
				<u-input type="textarea" v-model="form.emailContent" height="300" placeholder="请输入邮件正文" border
					maxlength="300" />
			</u-form-item>
		</u-form>
		<u-modal v-model="isShowModal" :content="modalContent" @confirm="backToHome" :show-cancel-button="false">
		</u-modal>
		<u-toast ref="uToast" />
		<u-button @click="submit" :loading="isSubmitLoading">投递</u-button>
	</view>
</template>

<script>
	import config from '@/static/config.js'
	export default {
		data() {
			return {
				isShowTimePicker: false,
				isSubmitLoading: false,
				isShowModal: false,
				isSendErr: false,
				modalContent: '',
				timePickerParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					timestamp: true
				},
				form: {
					from: '',
					email: '',
					sendTime: this.getDefaultTime(),
					emailContent: ''
				},
				rules: {
					from: [{
						required: true,
						message: '请输入寄件人姓名',
						trigger: 'blur'
					}, {
						max: 10,
						message: '姓名最多10个字',
						trigger: 'change'
					}],
					email: [{
						required: true,
						message: '请输入邮箱地址',
						trigger: 'change'
					}, {
						type: 'email',
						message: '请输入正确的邮箱地址',
						trigger: 'blur'
					}],
					emailContent: [{
						required: true,
						message: '请输入邮件正文',
						trigger: ['blur', 'change']
					}, {
						max: 300,
						message: '最多输入300个字',
						trigger: ['blur', 'change']
					}, {
						min: 10,
						message: '拜托多写点东西吧！'
					}]
				}
			};
		},
		methods: {
			submit() {
				const that = this;
				this.$refs.fmailForm.validate(valid => {
					if (!valid) return;
					if (!this.validateTime()) return;
					// 发起请求
					this.postFmail()
				})
			},
			getDefaultTime() {
				const date = new Date();
				const day = date.getDate()
				date.setDate(day + 1)
				return date.getTime();
			},
			handleShowTimePicker() {
				this.isShowTimePicker = true;
			},
			timePickerConfirm({
				timestamp
			}) {
				this.form.sendTime = timestamp * 1000
			},
			formatDate(timestamp) {
				if (!timestamp) {
					timestamp = this.getDefaultTime();
				}
				return this.$u.timeFormat(timestamp, 'yyyy-mm-dd hh:MM')
			},
			validateTime() {
				if (this.form.sendTime < new Date().getTime()) {
					this.$refs.uToast.show({
						title: '当前时间已过期，请重新选择',
						type: 'warning'
					})
					return false
				}
				return true;
			},
			backToHome() {
				if (this.isSendErr) {
					return;
				}
				uni.navigateBack({
					url: '@/pages/Fmail/Fmail'
				})
			},
			postFmail() {
				this.isSubmitLoading = true;
				const {
					from,
					email,
					emailContent,
					sendTime
				} = this.form;
				this.$u.api.postMail({
						from,
						email,
						text: emailContent,
						date: sendTime
					}).then(res => {
						this.modalContent = "未来邮箱已经整装待发了，愿君好运！"
						this.isShowModal = true;
						this.isSendErr = false;
					})
					.catch(err => {
						this.isSendErr = true;
					})
					.finally(() => {
						this.isSubmitLoading = false;
					});
			}
		},
		computed: {
			defaultTime() {
				if (this.form.sendTime) {
					return this.formatDate(this.form.sendTime)
				}
				return this.formatDate()
			}
		},
		onReady() {
			this.$refs.fmailForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.fmail_form {
		width: 92%;
		margin: 0 auto;
	}
</style>
